<template>
  <div class="progress-item">
    <div class="progress-title">{{ title }}</div>
    <div class="progress-container" :style="'height:'+height+'px'">
      <div class="line" :style="lineStyle"></div>
      <div :style="cursorStyle" class="cursor">
        <div :style="cursorCenterStyle" class="cursor-center"></div>
      </div>
    </div>
    <div class="percentage">{{percentage}}%</div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props:{
    title:{
      type:String,
      default:''
    },
    percentage:{
      type:[Number,String],
      default:0,
    },
    height:{
      type:Number,
      default:7
    }
  },
  computed:{
    lineStyle(){
      return{
        height: this.height+'px',
        width:this.percentage+'%'
      }
    },
    cursorStyle(){
      return{
        height: (this.height*3)+'px',
        width:(this.height*3)+'px',
        left:this.percentage+'%'
      }
    },
    cursorCenterStyle(){
      return{
        height: this.height+'px',
        width: this.height+'px',
      }
    }
  }
}
</script>

<style scoped lang="scss">
.progress-item{
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  >div{
    color:#fff;
    font-size: 14px;
  }
  .progress-title{
    width: 60px;
    margin-right: 5px;
  }
  .percentage{
    width: 40px;
    margin-left: 5px;
  }
  .progress-container{
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(112, 112, 112, 0.23);
    .line{
      width: 100%;
      border-radius: 12px;
      background-image: linear-gradient(to right, rgba(28, 126, 243, 0.1),#1c7ef3);
    }
    .cursor{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 0;
      border-radius: 50%;
      border: 1px solid #1B7EF2;
      display: flex;
      align-items: center;
      justify-content: center;
      .cursor-center{
        background: #fff;
        box-shadow: 0 0 12px 5px #1c7ef3;
        border-radius: 50%;
      }
    }
  }
}
</style>
